<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="html" @customPaste="customPaste" :defaultConfig="editorConfig" @onChange="handleChange" :mode="mode" @onCreated="onCreated" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getImg } from '@/api/students'

export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: '',
    },
    isClear: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.wangEditor.txt.clear()
        this.wangEditorInfo = null
      }
    },
    value: function (value) {
      if (value !== this.html) {
        this.isClear = false
        this.html = value //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
      }
    },
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        toolbarKeys: [
          'bold',
          'underline',
          'italic',
          'code',
          'clearStyle',
          'color',
          'bgColor',
          'fontSize',
          'header1', 'header2', 'header3', 'header4', 'header5',
          'fontFamily',
          'justifyLeft',
          'justifyRight',
          'justifyCenter',
          'lineHeight',
          '|',
          {
            key: 'group-table',
            title: '表格',
            menuKeys: ['insertTable', 'deleteTable', 'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth'],
          },
          'divider',
          // 'emotion',
          'blockquote',
          'headerSelect',
          'redo',
          'undo',
          'fullScreen',
        ],
        excludeKeys: ['insertImage', 'editImage', 'uploadImage', 'uploadVideo', 'insertVideo'],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        // MENU_CONF: {
        //   uploadImage: {
        //     // 文件名称
        //     fieldName: 'contentAttachImage',
        //     server: process.env.VUE_APP_API_BASE_URL + `/api/Upload/uploadImg?tablename=StudentInfo&signname=Photo`,
        //     headers: {
        //       Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN) && Vue.ls.get(ACCESS_TOKEN).token,
        //     },
        //     meta: {
        //       activityKey: this.relationKey,
        //     },
        //     // 单个文件的最大体积限制，默认为 20M
        //     maxFileSize: 20 * 1024 * 1024,
        //     // 最多可上传几个文件，默认为 100
        //     maxNumberOfFiles: 10,
        //     // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        //     allowedFileTypes: ['image/*'],
        //     // 跨域是否传递 cookie ，默认为 false
        //     withCredentials: false,
        //     // 超时时间，默认为 10 秒
        //     timeout: 5 * 1000,
        //     // 自定义插入图片操作
        //     customInsert: (res, insertFn) => {
        //       console.log(res, 'dddddddd')
        //       if (res.errno == -1) {
        //         this.$message.error('上传失败!')
        //         return
        //       }
        //       insertFn(getImg(`${res.Path}/${res.NewFileName}`), '', '')
        //       this.$message.success('上传成功!')
        //     },
        //   },
        // },
      },
      mode: 'default', // or 'simple'
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    handleChange() {
      const editor = this.editor // 获取 editor ，必须等待它渲染完之后
      if (editor == null) return
      this.$emit('getEditor', editor.getHtml())
    },
    customPaste(editor, event, callback) {
      let text = event.clipboardData.getData()
      editor.insertText(text)
      // 返回 false ，阻止默认粘贴行为
      event.preventDefault()
      callback(false)
    },

    uploadImage(file) {
      // 这里可以使用 axios、fetch 等工具发送文件到服务器进行保存或其他操作

      // 返回 Promise 对象，表示上传成功后的结果
      return new Promise((resolve, reject) => {
        const formData = new FormData()
        formData.append('image', file)
      })
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
})
</script>

<style lang="less" scoped></style>
